<script setup lang="ts">
import { ref, watch, computed, onMounted, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { useBasicStoreWithOut } from '@/store/modules/basic'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('logo')

const appStore = useAppStore()

const basicStore = useBasicStoreWithOut()

const show = ref(true)

const title = computed(() => basicStore.getHeader?.title || basicStore.getTitle)

const layout = computed(() => appStore.getLayout)

const collapse = computed(() => appStore.getCollapse)

onMounted(() => {
  if (unref(collapse)) show.value = false
})

watch(
  () => collapse.value,
  (collapse: boolean) => {
    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
      show.value = true
      return
    }
    if (!collapse) {
      setTimeout(() => {
        show.value = !collapse
      }, 400)
    } else {
      show.value = !collapse
    }
  }
)

watch(
  () => layout.value,
  (layout) => {
    if (layout === 'top' || layout === 'cutMenu') {
      show.value = true
    } else {
      if (unref(collapse)) {
        show.value = false
      } else {
        show.value = true
      }
    }
  }
)
</script>

<template>
  <div>
    <router-link
      :class="[
        prefixCls,
        layout !== 'classic' ? `${prefixCls}__Top` : '',
        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative',
        'dark:bg-[var(--el-bg-color)]'
      ]"
      :to="{ path: '/' }"
    >
      <img
        v-if="basicStore.getHeader?.image"
        :src="basicStore.getHeader?.image"
        class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
      />
      <template v-if="show">
        <div class="h-[50px] flex items-center justify-center flex-col">
          <div
            :class="[
              'ml-10px text-16px font-700',
              {
                'text-[var(--logo-title-text-color)]': layout === 'classic',
                'text-[var(--top-header-text-color)]':
                  layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
              }
            ]"
          >
            {{ title }}
          </div>
          <div class="text-sm mt-1" style="color: var(--el-text-color-placeholder)">
            {{ basicStore.getHeader?.subTitle }}
          </div>
        </div>
      </template>
    </router-link>
  </div>
</template>
